<template>
	<view class="container">
		<cp-goods-select height="92vh" :props="{label:'label',value:'value',children:'children'}" :options="list"
			@scrolltolower="handelScrolltolower" @category-change="handelCategoryChange">
			<!-- 自定义类型样式 -->
			<template v-slot:category>
				<cp-goods-select-category>
					<template v-for="(row,k) in list">
						<cp-goods-category-item :key="k" :category="row">
							<text>{{row.label}}</text>
							<!-- <text class="num">3</text> -->
						</cp-goods-category-item>
					</template>
				</cp-goods-select-category>
			</template>
			<cp-goods-item v-for="(item,index) in list" :key="index" :category="item.label">
				<view v-for="(cell,k) in item.children" :key="k" class="goods__item ">
					<image src="../../static/hot.png" mode="widthFix"></image>
					<view class="dis-flex list-desc">
						<view>
							{{ cell.label}}
						</view>
						<view class="money">
							<text style="font-size: 24rpx;">￥</text>{{cell.value}}
							<uni-number-box v-model="cell.sum"></uni-number-box>
						</view>
					</view>
				</view>
			</cp-goods-item>
		</cp-goods-select>
		<view class="bottom-navbar">
			<view class="dis-flex total-price">
				<view class="dis-flex" style="position: relative;width: 80rpx;height: 72rpx;">
					<u-icon name="bag" color="#fff" size="28"></u-icon>
					<text class="menu-length"> 1 </text>
				</view>
				<view style="margin-left: 10rpx;font-weight: 600;">￥88.00</view>
			</view>
			<button class="submit">已选好</button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				list: [{
						label: '锅底',
						value: 1,
						children: [{
								label: '番茄火锅',
								value: 1,
								sum: 0,
							},
							{
								label: '麻辣火锅',
								value: 1,
								sum: 1,
							},
							{
								label: '菌汤火锅',
								value: 1,
								sum: 0,
							},
							{
								label: '清油麻辣火锅',
								value: 1,
								sum: 0,
							},
							{
								label: '三鲜火锅',
								value: 1,
								sum: 0,
							},
							{
								label: '清水火锅',
								value: 1,
								sum: 0,
							},
						]
					},
					{
						label: '特别推荐',
						value: 2,
						children: [{
								label: '过足肉瘾大块羊肋排',
								value: 2,
								sum: 0,
							},
							{
								label: '嫩滑黑鱼片',
								value: 2,
								sum: 0,
							},
							{
								label: '捞派生鸭血',
								value: 2,
							},
							{
								label: '红薯苕皮',
								value: 2,
							},
							{
								label: '虾滑',
								value: 2,
							},
						]
					},
					{
						label: '特色菜品',
						value: 3,
						children: [{
								label: '招牌大颗粒虾滑',
								value: 3,
							},
							{
								label: '毛肚',
								value: 3,
							},
							{
								label: '捞派鸭肠',
								value: 3,
							},
							{
								label: '捞派滑牛肉',
								value: 3,
							},
							{
								label: '捞派豆花',
								value: 3,
							},
							{
								label: '捞派肥牛',
								value: 3,
							},
						]
					},
					{
						label: '卤味类',
						value: 4,
						children: [{
								label: '热卤大猪蹄子',
								value: 4,
							},
							{
								label: '热卤鸡爪',
								value: 4,
							},

						]
					},
					{
						label: '经典菜品',
						value: 5,
						children: [{
								label: '猪肚',
								value: 4,
							},
							{
								label: '脆皮肠',
								value: 4,
							},
							{
								label: '猪脑花',
								value: 4,
							},
							{
								label: '鹌鹑蛋',
								value: 4,
							},
							{
								label: '鸭舌',
								value: 4,
							},
							{
								label: '生鸡蛋',
								value: 4,
							},

						]
					},
					{
						label: '主食类',
						value: 6,
						children: [{
								label: '五常米饭',
								value: 4,
							},
							{
								label: '田园时蔬蛋炒饭',
								value: 4,
							},
							{
								label: '面条',
								value: 4,
							},
						]
					}
				],
				goods: [],
				vModelValue: 0
			}
		},
		onLoad() {


		},
		methods: {

			handelScrolltolower(e) {
				console.log('handelScrolltolower', e)
			},
			handelCategoryChange(e) {
				console.log('handelCategoryChange', e)
				let goods = [],
					j = 0;
				while (++j < 10) {
					goods.push({
						label: e.label + ': 商品' + j,
						value: j,
					})
				}
				this.goods = goods
			}
		}
	}
</script>

<style lang="scss">
	//小程序需要实现商品样式
	.cp-goods-select-goods__item {
		padding: 30upx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 4px;
		font-size: 14px;
		color: #262626;
		margin-bottom: 10upx;

		.sub-info {
			font-size: 12px;
			color: #84898f;
		}
	}

	.content {
		background-color: #eceff5;
		height: 100%;
	}

	.goods__item {
		// height: 300rpx;
		display: flex;

		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 15rpx;
		}

		.list-desc {
			flex-direction: column;
			justify-content: space-between;
			padding-left: 10rpx;
			flex: 1;
		}

		.money {
			font-size: 30rpx;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.item {
		padding: 10upx 30upx;
		background-color: #fff;
		margin: 0 10upx;
		margin-bottom: 10upx;

	}

	.num {
		border-radius: 50%;
		background-color: #ff4059;
		color: #fff;
		display: inline-block;
		width: 30upx;
		height: 30upx;
		line-height: 30upx;
		text-align: center;
		position: absolute;
		top: 4px;
		font-size: 16rpx;
		box-sizing: border-box;
	}

	.bottom-navbar {
		position: fixed;
		bottom: 30rpx;
		width: 100%;
		height: 100rpx;
		border-radius: 50rpx 50rpx 0 0;
		background-color: #262626;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;
		font-size: 36rpx;

		.menu-length {
			border-radius: 50%;
			background: #ff4059;
			width: 30rpx;
			display: inline-block;
			height: 30rpx;
			line-height: 30rpx;
			text-align: center;
			font-size: 18rpx;
			box-sizing: border-box;
			position: absolute;
			top: 0rpx;
			right: 3rpx;

		}

		.total-price {
			align-items: center;
			padding-left: 50rpx;

		}

		.submit {
			background: #ff4059;
			margin: 0;
			height: 100rpx;
			width: 250rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #fff;
			line-height: 100rpx;
			border-radius: 0 50rpx 0rpx 0;
		}
	}
</style>